<template>
    <div>
        <h2>优惠券列表</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>类型</td>
                    <td>标题</td>
                    <td>副标题</td>
                    <td>图片</td>
                    <td>剩余库存</td>
                    <td>有效期</td>
                    <td>使用范围</td>
                    <td>服务电话</td>
                    <td>门店</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>
                        <span v-if="item.disType==1">代金券</span>
                        <span v-if="item.disType==2">折扣券</span>
                        <span v-if="item.disType==3">兑换券</span>
                    </td>
                    <td>{{item.tile}}</td>
                    <td>
                       {{item.fTile}}
                    </td>
                    <td> <img :src="item.photo" alt="" style="width: 100px;height: 100px;"></td>
                    <td>{{item.count}}</td>
                    <td>{{ moment(item.beginTime).format('YYYY-MM-DD ') }} - {{ moment(item.endTime).format('YYYY-MM-DD ') }}</td>
                    <td>{{item.range}}</td>
                    <td>{{item.phone.substring(0, 3)}}****{{item.phone.substring(7, 11)}}</td>
                    <td>
                        <option :value="item.id" v-for="item in data.list" :key="item.id">{{item.shopName}}</option>
                    </td>
                    <td>
                        <input type="button" value="删除" @click="CompoDel(item.id)">
                        <input type="button" value="编辑" @click="CompoUpt(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            共{{data.toalCount}}条数据，当前第{{queryInfo.pageindex}}页，共{{data.toalCount}}页
            <span>每页显示</span>
            <select>
                <option value="" v-for="item in sizes" :key="item">每页{{item}}</option>
            </select>
            <span v-for="item in data.toalPage" :key="item" @click="gopage(item)">{{item}}</span> 
             <span v-for="item in data.totalPage" :key="item">{{item}}</span>
            <input type="text" v-model="queryInfo.pageindex" /> 
            <input  type="button" value="首页" @click="gopage('a')"/>
            <input  type="button" value="上一页" @click="gopage('b')"/>
            <input  type="button" value="下一页" @click="gopage('c')"/>
            <input  type="button" value="尾页" @click="gopage('d')"/>
        </div>
    </div>
</template>

<script setup lang="ts">
import moment, { lang } from 'moment';
import { reactive,ref,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const route = useRoute();
onMounted(()=>{
    getCoupons();
    getShopList();
})
let Show=()=>{
    queryInfo.pageindex=1;
    getCoupons();
}
let sizes=ref([2,4,6,8,10])
let queryInfo:any = reactive({
    pageindex:1,//页码
    pagesize:2,//页容量
    tile:'',//标题
    shopId:'',//门店id
})
//优惠券列表
let data:any=reactive({
    list:[],
    toalCount:0,
    toalPage:0
})
const getCoupons = ()=>{
    axios({
        url:'/api/DisCount/GetDisCountList',
        method:'get',
        params:queryInfo
    })
    .then((res)=>{
        console.log(res);
        data.list = res.data.list;
        data.toalCount = res.data.toalCount;
        data.toalPage = res.data.toalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}
//获取门店列表
let shoplist=ref([]);
const getShopList=()=>{
    axios({
        url:'/api/Shops/GetShopsList',
        method:'get',
        params:{
            toalsize:1000,
            
        }
    })
    .then((res)=>{
        console.log(res.data);
        shoplist.value = res.data.list;
    })
}
const gopage = (str:string) => {
    switch(str){
        case 'a':
            if(queryInfo.pageindex==1){
                alert('已经是第一页了');
                return;
            }
            queryInfo.pageindex =1;
            break;
        case 'b':
            if(queryInfo.pageindex==1){
                alert('不能小于1');
                return;
            }
            queryInfo.pageindex--;
            break;
        case 'c':
            if(queryInfo.pageindex==data.toalPage){
                alert('已经是最后一页了');
                return;
            }
            queryInfo.pageindex++;
            break;
        case 'd':
        if(queryInfo.pageindex==data.toalPage){
                alert('已经是最后一页了');
                return;
            }
            queryInfo.pageindex = data.toalPage;
            break;
    }
    getCoupons();
}
const CompoDel=(id:any)=>{
    var f=confirm('确认删除吗？');
    if(f==true){
        axios({
            url:'/api/DisCount/DelDisCount',
            method:'delete',
            params:{
                id:id
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getCoupons();
            }
            else{
                alert('删除失败');
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }
}
//修改跳转
const CompoUpt=(id:any)=>{
    router.push({
        path:'/CouponsUpdate',
        query:{id:id}
    })
}
</script>

<style scoped>

</style>